<template>
  <div class="my-space">

    <div class="my-zoon-wrap">
      <div class="zoon-photo fl"><img src="/default-photo.jpg"/></div>
      <div class="zoon-user-info fl">
        <div class="zoon-user-name-group">
          <span>张盼枝</span> <span><span>攻城狮</span> <span>LV1.0</span></span>
        </div>
        <div class="zoon-user-autograph-group">
          <span>是打发第三方到时分水费水费的身份是否是方是否的身份</span>
        </div>
      </div>
      <div class="zoon-user-oper fr"><nuxt-link class="zoon-user-oper-item" :to="'/my/2'">粉丝</nuxt-link><a>|</a><nuxt-link class="zoon-user-oper-item" :to="'/my/3'">关注</nuxt-link><a>|</a><nuxt-link class="zoon-user-oper-item" :to="'/my/1'">资料</nuxt-link>
      </div>
      <div class="cf"></div>
    </div>
    <MainHeader class="layout-my-header"/>
    <nuxt class="layout-my-content"/>
    <MyRight class="layout-my-right"/>
    <MobileBottom
      v-if="!this.$store.state.contentModal"
      class="layout-my-bottom"/>
  </div>
</template>
<script>
  import MainHeader from '~/components/layout/main-header.vue'
  import MainLeft from '~/components/layout/main-left.vue'
  import MyRight from '~/components/layout/my-right.vue'
  import MobileBottom from '~/components/layout/mobile-bottom.vue'
  export default {
    data () {
      return {
      }
    },
    components: {
      MainHeader,
      MainLeft,
      MyRight,
      MobileBottom
    },
    beforeCreate: function () {
    },
    methods: {
    }
  }
</script>
<style>

  .my-zoon-wrap > div {
    height: 80px;
    margin-top: 10px;
  }

  .zoon-photo {
    width: 80px;
    height: 80px;
    overflow: hidden;
    border-radius: 80px;
  }

  .zoon-photo > img {
    width: 80px;
    height: 80px;
    cursor: pointer;
    transition: all 0.6s;
    border-radius: 80px;
  }

  .zoon-photo > img:hover {
    transform: scale(1.4);
  }

  .zoon-user-info {
    width: 59%;
    margin-left: 2%;
  }

  .zoon-user-name-group > span:nth-child(1) {
    font-weight: 700;
    font-size: 2em;
    color: #13BA31;
    height: 25px;
    line-height: 25px;
    margin-top: 10px;
  }
  .zoon-user-name-group>span:nth-child(2){
    margin-left: 10px;
    font-size: 1.2em;
  }
  .zoon-user-name-group>span:nth-child(2)>span{
    background-color: #ececec;
    color: #13BA31;
    margin-right: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
  }

  .zoon-user-autograph-group > span:nth-child(1) {
    height: 60px;
    font-size: 1.25em;
    margin-top: 10px;
    font-weight: 700;
    color: #707070;
  }

  .zoon-user-oper  {
    width: 30%;
    height: 80px;
    line-height: 80px;
  }

  .zoon-user-oper-item {
    width: 30%;
    text-align: center;
    font-size: 1.25em;
    font-weight: 700;
  }

  .my-space {
    position: absolute;
    background-color: #f3f3f3;
    height: 100%;
    width: 100%;
    overflow-y: auto;
  }

  .layout-my-content, .my-zoon-wrap {
    background-color: #ffffff;
  }

  .my-zoon-wrap {
    height: 100px;
    top: 60px;
    position: absolute;
  }

  .layout-my-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
  }

  .layout-my-right, .layout-my-content {
    top: 170px;
  }

  .layout-my-content, .layout-my-right {
    position: absolute;
    z-index: 1;
  }

  .layout-my-bottom {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    background-color: #ffffff;
    width: 100%;
  }

  .layout-my-bottom {
    bottom: 0;
  }

  @media all and (min-width: 1200px) {

    .layout-my-content {
      width: 870px;
      left: calc(100% - (100% - 1200px)/2);
    }

    .layout-my-right {
      width: 330px;
      left: calc(100% - (100% - 1200px)/2 + 870px);
    }

    .my-zoon-wrap {
      width: 1200px;
      left: calc(100% - (100% - 1200px)/2);
    }
  }

  @media all and (min-width: 767px) and (max-width: 1200px) {

    .layout-my-content {
      width: 59.5%;
      left: 4%;
    }

    .layout-my-right {
      width: 32%;
      left: 64%;
    }

    .zoon-user-info {
      width: 56%;
    }

    .my-zoon-wrap {
      width: 90%;
      left: 4%;
      padding-right: 1%;
      padding-left: 1%;
    }
  }

  /* 手机或小平板 phone */
  @media all and (max-width: 766px) {
    .layout-my-bottom {
      display: block;
    }

    .layout-my-right, .layout-my-header {
      display: none;
    }

    .layout-my-content {
      width: 100%;
      left: 0;
    }


    .my-zoon-wrap {
      position: static;
      width: 98%;
      padding-left: 1%;
      padding-right: 1%;
      height: 100px;
    }

    .zoon-user-info {
      width: 72%;
    }

    .zoon-user-oper {
      display: none;
    }


    .layout-my-content {
      top: 110px;
      margin-bottom: 60px;
    }

    .zoon-user-autograph-group > span:nth-child(1) {
      margin-top: 5px;
      font-size: 1.1em;
    }

    .zoon-user-name-group > span:nth-child(1) {
      margin-top: 8px;
      font-size: 1.5em;
    }

  }


</style>
